<template>
  <div class="lsc-reginfo">
    <mt-header title="完善信息"></mt-header>
    <div class="lsc-reginfo-server">
      <label>服务信息</label>
      <mt-cell title="服务内容" is-link @click.native="popupVisible=true"></mt-cell>
      <div class="lsc-reginfo-popupshow">
        <mt-cell 
          v-for="(item,index) in sericeItemShow" 
          :key="index" 
          icon="field-success" 
          :title="item"></mt-cell>
      </div>
      <mt-cell title="服务区域" :value="reginfo.service_area" is-link @click.native="showArea"></mt-cell>
      <mt-cell title="工作年限" :value="reginfo.working_life" is-link @click.native="sheetVisible=true"></mt-cell>
      <mt-cell title="持有执照" :value="reginfo.license" is-link @click.native="popupLicense=true"></mt-cell>
    </div>
    <!-- <div class="lsc-reginfo-identity">
      <label>身份信息</label>
      <mt-field label="身份证号" placeholder="请输入您的身份证号" v-model="reginfo.cardno"></mt-field>
      <div class="lsc-reginfo-upload">
        <ul>
          <li>
            <span>正面</span>
            <div @click="cardAdd(0)"  v-if="!reginfo.card_z"><i/></div>
            <div v-if="reginfo.card_z"><img :src="reginfo.card_z" width="80"></div>
          </li>
          <li>
            <span>反面</span>
            <div @click="cardAdd(1)" v-if="!reginfo.card_f"><i/></div>
            <div v-if="reginfo.card_f"><img :src="reginfo.card_f" width="80"></div>
          </li>
        </ul>
      </div>
    </div> -->
    <div class="lsc-reginfo-button">
      <mt-button type="primary" style="width: 60%;" @click="onClickAudit">提交审核</mt-button>
    </div>
    
    <!-- 选择工作年限 -->
    <mt-actionsheet
      cancelText=""
      :actions="actions"
      v-model="sheetVisible">
    </mt-actionsheet>
    <!-- 选择持有执照 -->
    <mt-actionsheet
      cancelText=""
      :actions="licenseTypes"
      v-model="licenseVisible">
    </mt-actionsheet>
    <!-- 选择服务区域 -->
    <vue-city-picker ref="picker" @select="selectArea"></vue-city-picker>
    <!-- 选择持有执照 -->
    <mt-popup v-model="popupLicense" position="right" class="mint-popup-3" :modal="false">
      
      <mt-header title="持有执照">
        <mt-button slot="left" icon="back" @click.native="popupLicense=false"></mt-button>
        <mt-button slot="right" @click.native="onPopupLicense">确定</mt-button>
      </mt-header>
      <mt-checklist
        align="right"
        class="page-part"
        v-model="licenseGeter"
        :options="sericeItem">
      </mt-checklist>
    </mt-popup>
    <!-- 选择服务内容 -->
    <mt-popup v-model="popupVisible" position="right" class="mint-popup-3" :modal="false">
      
      <mt-header title="服务内容">
        <mt-button slot="left" icon="back" @click.native="popupVisible=false"></mt-button>
        <mt-button slot="right" @click.native="onPopupSave">确定</mt-button>
      </mt-header>
      <mt-checklist
        align="right"
        class="page-part"
        v-model="reginfo.service_content"
        :options="sericeItem">
      </mt-checklist>
    </mt-popup>
  </div>
</template>

<script>

import api from '../api';
import vueCityPicker from 'vue-city-bspicker'

export default {
  name: 'reginfo',
  components: {
    vueCityPicker
  },
  data () {
    return {
      popupVisible: false,
      popupLicense: false,
      popupValue:[],
      sericeItem:[],
      licenseTypes:[],
      licenseGeter:[],
      sericeItemShow: [],
      sericeArea: '',
      reginfo: {
        id: localStorage.mid,
        service_content: [],
        service_area: '',
        province_id: 0,
        city_id: 0,
        area_id: 0,
        working_life: '',
        license: '',
        cardno: '',
        card_z: '',
        card_f: ''
      },
      sheetVisible: false,
      actions: [
        {
          name: '2年以内',
          method: this.onClickWorkyear
        },
        {
          name: '2年至5年',
          method: this.onClickWorkyear
        },
        {
          name: '5年以上',
          method: this.onClickWorkyear
        }
      ],
      licenseVisible: false,
      actionsLicense: [
        {
          name: '有执照',
          method: this.onClickLicense
        },
        {
          name: '无',
          method: this.onClickLicense
        },
        {
          name: '你猜',
          method: this.onClickLicense
        }
      ]
    }
  },
  created() {

    // 获取服务内容列表
    this.getServiceItem()
    // this.getWxConfig()
  },
  methods: {
    getServiceItem() {
      this.axios.get(api.masterData.ServiceContents)
        .then(res=>{
          this.sericeItem = res.data.data
        })
    },
    getLicenseTypes() {
      this.axios.get(api.masterData.LicenseTypes)
        .then(res=>{
          let licenseTypes = res.data.data
          licenseTypes.forEach((val)=>{
            this.licenseTypes.push(val.name)
          })
        })
    },
    cardAdd(index) {
      let _this = this;
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          _this.cardUpload(index, localIds)
        },
        fail: function(err) {
          _this.$toast('PICTURE ADD ERROR')
        }
      });
    },
    cardUpload(index, localIds) {
      let _this = this
      wx.uploadImage({
        localId: localIds.toString(),
        isShowProgressTips: 1,
        success: function (res) {
          _this.axios({
            method: "post",
            url: api.housekeeper.UpdateCert,
            data: { 
              serverId: res.serverId,
              homemaking_id: localStorage.mid
            },
            responseType: "json"
          })
            .then(res=> {
              
              if(!index) {
                // 正面
                _this.reginfo.card_z = res.data.data
                return
              }
              // 反面
              _this.reginfo.card_f = res.data.data
            })
        },
        fail: function (res) {
          _this.$toast('PICTURE UPLOAD ERROR')
        }
      });
    },
    onClickWorkyear(item) {
      this.reginfo.working_life = item.name
    },
    showArea(){
        this.$refs['picker'].show();
    },
    selectArea(){
      this.reginfo.province_id = arguments[0][0]
      this.reginfo.city_id = arguments[0][1]
      this.reginfo.area_id = arguments[0][2]
      this.reginfo.service_area = `${arguments[2][0]} ${arguments[2][1]} ${arguments[2][2]}`
    },
    onPopupSave() {

      this.sericeItemShow = []
      this.reginfo.service_content.forEach(value=> {
        this.sericeItem.forEach(val=>{
          if(val.value === value) {
            this.sericeItemShow.push(val.label)
          }
        })
      });
      this.popupVisible = false
    },
    onPopupLicense() {
      this.reginfo.license = ''
      this.licenseGeter.forEach((value,index)=> {
        this.sericeItem.forEach((val, ind)=>{
          if(val.value === value) {
            this.reginfo.license += !index ? val.label : (',' + val.label)
          }
        })
      });
      this.popupLicense = false
    },
    onClickAudit() {
      let validReisterInfo = this.validReisterInfo(); // 校验手机号码
      if (validReisterInfo) return;
      this.postSaveBasicInfo()
    },
    postSaveBasicInfo() {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.axios.post(api.housekeeper.SaveBasicInfo, this.reginfo)
        .then(res=>{
          this.$indicator.close();
          this.$router.push('/regtips')
        })
    },
    validReisterInfo() {
      if(!this.reginfo.service_content.length) {
        this.$toast('服务内容不能为空！')
        return true;
      }
      if(!this.reginfo.service_area) {
        this.$toast('服务区域不能为空！')
        return true;
      }
      if(!this.reginfo.working_life) {
        this.$toast('工作年限不能为空！')
        return true;
      }
      // if(!this.reginfo.cardno) {
      //   this.$toast('身份证号不能为空！')
      //   return true;
      // }
      // if(!this.reginfo.card_z) {
      //   this.$toast('请上传清晰的身份证正面图片！')
      //   return true;
      // }
      // if(!this.reginfo.card_f) {
      //   this.$toast('请上传清晰的身份证背面图片！')
      //   return true;
      // }

    },
    getWxConfig() {
      let signLink =  location.href.split('#')[0] ///(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : localStorage.entryUrl;
      
      const getWxValid = () => {
        this.axios({
          method: "get",
          url: api.valid.WxConfig,
          params: {
            pageurl: signLink
          }
        }).then(function(rsp) {
            wxconfig(rsp.data);
          }).catch(err=>{
              alert(JSON.stringify(err))
            })
      };
      const wxconfig = datas => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: datas.appId, // 必填，公众号的唯一标识
          nonceStr: datas.nonceStr, // 必填，生成签名的随机串
          timestamp: datas.timestamp, // 必填，生成签名的时间戳
          signature: datas.signature, // 必填，签名，见附录1
          jsApiList: [
            "checkJsApi",
            "chooseImage",
            "previewImage",
            "uploadImage",
            "downloadImage",
            "translateVoice"
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      };
      wx.hideMenuItems({
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:share:weiboApp",
          "menuItem:share:facebook",
          "menuItem:share:QZone",
          "menuItem:copyUrl",
          "menuItem:originPage",
          "menuItem:openWithQQBrowser",
          "menuItem:openWithSafari"
        ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      });

      getWxValid()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.lsc-reginfo-server>label,
.lsc-reginfo-identity>label {
  padding: 10px;
  display: block;
}
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.lsc-reginfo-popupshow {
  background: #fff;
  padding: 0 10px;
}
.lsc-reginfo-upload {
  border-top: 1px solid #d9d9d9;
  padding: 20px 0;
  background: #fff;
}
.lsc-reginfo-upload ul {
  margin: 0;
  padding: 0;
}
.lsc-reginfo-upload ul li {
  list-style: none;
  width: 50%;
  float: left;
  text-align: center
}
.lsc-reginfo-upload::after,
.lsc-reginfo-upload ul li::after {
  display: block;
  content: '';
  clear: both;
}
.lsc-reginfo-upload ul li span {
  display: inline-block;
  padding: 20px 0;
}
.lsc-reginfo-upload ul li div>i {
  display: inline-block;
}
.lsc-reginfo-upload ul li div>i::before {
  display: block;
  content: '+';
  /* content: '\271D'; */
  font-size: 70px;
  vertical-align: middle;
  text-align: center;
  font-style: normal;
  color: #ccc;
  border: 5px solid #ddd;
  border-radius: 10px;
  width: 80px;
  height: 80px;
}
.lsc-reginfo-upload li>img {
  width: 80px;
  height: 80px;
}

.lsc-reginfo-button {
  text-align: center;
  margin: 40px 0;
}
</style>
<style>

.lsc-reginfo .mintui-field-success:before {
  color: #26a2ff
}
.lsc-reginfo .mint-checklist-title {
  margin: 0;
}
</style>

